<template>
  <div  class="form">
    <div class="required-icon">* required</div>
    <a-form
      :model="modelRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rulesRef"
      ref="formRef"
    >
      <a-form-item label="First Name" name="first_name">
        <a-input v-model:value="modelRef .first_name" />
      </a-form-item>
      <a-form-item label="Last Name" name="last_name">
        <a-input v-model:value="modelRef .last_name" />
      </a-form-item>
      <a-form-item label="Phone Number" name="telephone">
        <a-input v-model:value="modelRef .telephone" />
      </a-form-item>
      <a-form-item label="Email" name="email">
        <a-input type="email" v-model:value="modelRef .email" />
      </a-form-item>
      <a-form-item label="Job Title">
        <a-input v-model:value="modelRef .job" />
      </a-form-item>
      <a-form-item label="Company" name="company">
        <a-input v-model:value="modelRef .company" />
      </a-form-item>
      <a-form-item label="Country" name="country">
        <a-input v-model:value="modelRef .country" />
      </a-form-item>
      <a-form-item label="I am" name="identity_name">
        <a-radio-group v-model:value="modelRef .identity_name">
          <a-radio value="1" name="type">End User</a-radio>
          <a-radio value="2" name="type">Integrator</a-radio>
          <a-radio value="3" name="type">Reseller</a-radio>
          <a-radio value="4" name="type">Other</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="Message" name="content">
        <a-textarea v-model:value="modelRef.content" size="large" style="height:150px;"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">Submit</a-button>
        <a-button style="margin-left: 10px" @click="onCancel">Cancel</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {defineComponent, reactive, ref, toRaw} from 'vue';
import {setMessage} from "../../api/contact";
import { message } from 'ant-design-vue';
export default defineComponent({
  name:"MessageCom",
  setup() {
    const formRef = ref();
    let modelRef  = reactive({
      first_name: '',
      last_name: '',
      telephone: '',
      email: '',
      job: '',
      country:'',
      company: '',
      identity_name:'',
      content: '',
    });
    const rulesRef = reactive({
      first_name: [{
            required: true,
            message: 'Please input firstName',
            trigger: 'blur',
          }],
      last_name: [{
        required: true,
        message: 'Please input lastName',
        trigger: 'blur',
      }],
      telephone:[{
        required: true,
        message: 'Please input phoneNumber',
        trigger: 'blur',
      }],
      email:[{
        required: true,
        message: 'Please input email',
        trigger: 'blur',
      }],
      country:[{
        required: true,
        message: 'Please input country',
        trigger: 'blur',
      }],
      identity_name:[{
        required: true,
        message: 'Please select job',
        trigger: 'change',
      }],
      content:[{
        required: true,
        message: 'Please input message',
        trigger: 'blur',
      }],
      company:[{
        required: true,
        message: 'Please input country',
        trigger: 'blur',
      }],
    })

    const mailReg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          const  keysArr = Object.keys(toRaw(modelRef))
          for(let i = 0; i < keysArr.length; i++){
            if(keysArr[i] === 'email'){
              if (!mailReg.test(toRaw(modelRef).email)) {
                message.error('Please enter the correct email format');
                return false
              }
            }
          }
          setMessage(toRaw(modelRef)).then((res)=>{
            if(res && res.code === 200){
              message.info('success');
              window._czc.push(['_trackEvent', '点击', '提交信息','telephone：'+toRaw(modelRef).telephone]);
              modelRef.first_name = ""
              modelRef.last_name = ""
              modelRef.telephone = ""
              modelRef.email = ""
              modelRef.job = ""
              modelRef.country = ""
              modelRef.company = ""
              modelRef.identity_name = ""
              modelRef.content = ""
            }
          })
        })
        .catch(error => {
          console.log('error', error);
        });
    };

    const onCancel = () =>{
      modelRef.first_name = ""
      modelRef.last_name = ""
      modelRef.telephone = ""
      modelRef.email = ""
      modelRef.job = ""
      modelRef.country = ""
      modelRef.company = ""
      modelRef.identity_name = ""
      modelRef.content = ""
    }

    return {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      modelRef ,
      onSubmit,
      rulesRef,
      onCancel,
      formRef
    };
  },
});
</script>
<style lang="scss" scoped>
.form{
  margin: 20px auto;
  width:70vw;
  .required-icon{
    text-align: right;
    color:#f81d22;
  }
}
</style>
